<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        input{
            margin: 10px;
        }

        #grandpa {
            width: 400px;
            height: 400px;
            background-color: red;
        }

        #father {
            width: 300px;
            height: 300px;
            background-color: green;
        }

        #me {
            width: 200px;
            height: 200px;
            background-color: blue;
        }
    </style>
</head>
<body>
    <div id="app">

        <!-- v-model  指令的修饰符 -->
        <!-- number: 把值转换成 数字， 如果开头的字符是非数字， 那么依然是 字符串，如果是后面有非数字， 那么去掉会去掉后面的非数字  -->

        <input type="text" v-model.number="count"><br>
        <!--  trim 去掉字符串前后的空格 -->
        <input type="text" v-model.trim="msr"><br>

        <!-- lazy 让事件变成 change -->
        <input type="text" v-model.lazy="sre"><br>

        <!-- 事件修饰符 -->
        <input type="button" value="按钮" @click="fn">

        <div id="grandpa" @click="grandpafn">
            <!-- <div id="father" @click.stop.self="fatherfn" > -->
            <div id="father" @click.self.stop="fatherfn" >
                <div id="me" @click="mefn">阻止事件继续传播</div>
            </div>
        </div>

        <!-- san : 事件修饰符 按键 -->

        <!-- 回车后打印 -->
        <input type="text " @keyup.enter="keyupFn">

        <br>
        <!-- 根据按键编码 -->
        <input type="text " @keyup.13="keyupFn">

        <input type="text" @keyup.left="keyupFnleft">

        <br>
        <!-- 精确 Ctrl+enter -->
        <input type="text" @keyup.exact.ctrl.enter="send">
        <input type="button" value="发送" @click="send">
    </div>
    
</body>
<script src="./vue.js"></script>
<script>
    let vm = new Vue({
        el: '#app',
        data: {
            count: 3,
            msr:'hi',
            sre: 'hello'
        },
        methods:{
            fn(){
                console.log('我点击了')
            },
            grandpafn(){
                console.log('grandpa点击了')
            },
            fatherfn(){
                console.log('father点击了')
            },
            mefn(){
                console.log('me 点击了')
            },
            keyupFn(){
                console.log('你好北京')
            },
            keyupFnleft(){
                console.log('你好，济南')
            },
            send(){
                console.log('你好年轻')
            }

        }
    })
</script>
</html>